{extend name="base"/}
{block name="resources"}
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>平台已经维护好对应的商品属性，如果满足不了您的需求，可以编辑属性</li>
			<li>前台用户可以根据分类关联的属性在搜索分类商品之后根据商品属性进行进一步的搜索</li>
		</ul>
	</div>
</div>

<!-- 搜索框 -->
<div class="ns-single-filter-box">
	<button class="layui-btn ns-bg-color" onclick="addAttr()">添加商品属性</button>
	<div class="layui-form">
		<div class="layui-input-inline">
			<input type="text" name="search_keys" placeholder="请输入商品属性名称" autocomplete="off" class="layui-input">
			<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
				<i class="layui-icon">&#xe615;</i>
			</button>
		</div>
	</div>
</div>

<table id="attr_class_list" lay-filter="attr_class_list"></table>

<!-- 操作 -->
<script type="text/html" id="action">
	<div class="ns-table-btn">
		<a class="layui-btn" lay-event="edit">属性管理</a>
	</div>
</script>

<script type="text/html" id="addAttr">

	<div class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label sm" style="width: 110px;"><span class="required">*</span>商品属性名称</label>
			<div class="layui-input-block">
				<input name="class_name" type="text" placeholder="请输入商品属性名称" lay-verify="required" class="layui-input ns-len-mid">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label sm" style="width: 110px;">排序</label>
			<div class="layui-input-block">
				<input name="sort" type="number" value="0" placeholder="请输入排序" lay-verify="num" class="layui-input ns-len-short">
			</div>
			<p class="ns-word-aux sm">排序值必须为整数</p>
		</div>

		<div class="ns-form-row sm">
			<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
			<button class="layui-btn layui-btn-primary" onclick="closeAttrLayer()">返回</button>
		</div>
	</div>

</script>
{/block}
{block name="script"}
<script>
	var laytpl, add_attr_index = -1, form, table;
	layui.use(['form','laytpl'], function() {
		laytpl = layui.laytpl;
		form = layui.form;
		form.render();
		
		table = new Table({
			elem: '#attr_class_list',
			url: ns.url("shop/goodsattr/lists"),
			cols: [
				[{
					field: 'class_name',
					title: '商品属性名称',
					width: '80%',
					unresize: 'false'
				}, {
					title: '操作',
					width: '20%',
					toolbar: '#action',
					unresize: 'false'
				}]
			]
		});
		
		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'edit':
					location.href = ns.url("shop/goodsattr/editattr",{"class_id":data.class_id});
					break;
			}
		});
		
		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data){
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});

		form.on('submit(save)', function(data) {

			if (repeat_flag) return false;
			repeat_flag = true;

			$.ajax({
				url: '{:addon_url("shop/goodsattr/addAttr")}',
				data: data.field,
				dataType: 'JSON',
				type: 'POST',
				success: function(data) {
					layer.msg(data.message);
					if (data.code == 0) {
						table.reload();
						layer.close(add_attr_index);
					}
					repeat_flag = false;
				}
			});
			return false;
		});
	});


	function addAttr() {
		var add_attr = $("#addAttr").html();
		laytpl(add_attr).render({}, function(html) {
			add_attr_index = layer.open({
				title: '添加商品属性',
				skin: 'layer-tips-class',
				type: 1,
				area: ['450px'],
				content: html
			});
		});

	}

	function closeAttrLayer() {
		layer.close(add_attr_index);
	}
</script>
{/block}